$set()解决vue数组添加数据后却不显示到视图上面的问题。 您所在的位置:网站首页 vue this$set 数组对象 $set()解决vue数组添加数据后却不显示到视图上面的问题。

$set()解决vue数组添加数据后却不显示到视图上面的问题。

2023-11-08 10:43| 来源: 网络整理| 查看: 265

这几天开发遇到一个这样的问题:在vue实例已经创建好了的时候,当我们再向data里面的数组或对象加入属性时,发现数据不更新到视图上面。

举例说明一下,

{{ info.name }} {{ info.age }} {{ info.hobby }} data() { return { info: { name:'lily', age:23, hobby:'draw' } } },

页面呈现的效果:(css样式可以自己调整)

 

 现在我们有个需求:mounted函数接收到后端接口后发现缺少所需的变量,那么需要我们前端手动添加。如果我们用  arrary.变量名  或者  arrary["变量名"]  的方式添加,会发现不生效(其实数据已经加入到info中了,但是并没有更新到视图上)。此时我们就需要使用 this.$set()。

这是因为data中的数据是响应式的,我们也需要让添加的元素是响应式的(可以触发视图)

this.$set()使用方法:this.$set(object,obj,value)

object:要更改的数组或者对象;obj:要添加或者更改的属性(也可以是下标);value:属性的值

还有一些函数也是可以更新视图的,例如pop、push、shift、unshift、splice、sort、reverse这些。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有